<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px">
      <el-breadcrumb-item :to="{ path: '/' }">后台管理</el-breadcrumb-item>
      <el-breadcrumb-item>课程管理</el-breadcrumb-item>
      <el-breadcrumb-item>课程列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>

    <el-button type="primary" icon="el-icon-plus" style="margin-bottom: 10px"
               @click="dialogVisible = true">创建
    </el-button>
    <div style="float: right;position: relative">
      <el-input placeholder="请输入课程名称" v-model="wd">
        <el-button slot="append" icon="el-icon-search"
                   style="background-color: #409EFF;color: white"
                   @click="search()"></el-button>
      </el-input>
    </div>
    <el-table :data="courseArr" border style="width: 100%">
      <el-table-column prop="id" label="课程编号" width="100"></el-table-column>
      <el-table-column prop="name" label="课程名称"></el-table-column>
      <el-table-column prop="dept" label="所属系"></el-table-column>
      <el-table-column prop="year" label="年级"></el-table-column>
      <el-table-column prop="teacher" label="教师"></el-table-column>
      <el-table-column prop="times" label="上课时间"></el-table-column>
      <el-table-column prop="loc" label="上课地点"></el-table-column>
      <el-table-column prop="credit" label="学分" width="100"></el-table-column>
      <el-table-column prop="type" label="课程类型"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="success"
                     @click="handleEdit(scope.row)">修改
          </el-button>&nbsp;
          <el-button size="mini" type="danger"
                     @click="openDeleteConfirm(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          :page-sizes="[8]"
          :page-size="8"
          layout="total, sizes, prev, pager, next, jumper"
          :total="courseArr.length">
      </el-pagination>
    </div>

    <!-- 弹出的添加课程的对话框 -->
    <el-dialog title="添加课程信息" :visible.sync="dialogVisible">
      <el-form :model="ruleForm">
        <el-form-item label="课程名称" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="所属系" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.dept"></el-input>
        </el-form-item>
        <el-form-item label="年级" :label-width="formLabelWidth">
          <el-select v-model="ruleForm.year">
            <el-option label="大一" value="大一"></el-option>
            <el-option label="大二" value="大二"></el-option>
            <el-option label="大三" value="大三"></el-option>
            <el-option label="大四" value="大四"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="教师" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.teacher"></el-input>
        </el-form-item>
        <el-form-item label="上课时间" :label-width="formLabelWidth">
          <el-select v-model="ruleForm.times">
            <el-option label="周一第一节" value="周一第一节"></el-option>
            <el-option label="周一第二节" value="周一第二节"></el-option>
            <el-option label="周一第三节" value="周一第三节"></el-option>
            <el-option label="周一第四节" value="周一第四节"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上课地点" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.loc"></el-input>
        </el-form-item>
        <el-form-item label="学分" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.credit"></el-input>
        </el-form-item>
        <el-form-item label="课程类型" :label-width="formLabelWidth">
          <el-select v-model="ruleForm.type">
            <el-option label="必修" value="必修"></el-option>
            <el-option label="选修" value="选修"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitNewCourse('ruleForm')">添 加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage1:1,
      wd:"",
      ruleForm: {
        name:'', dept:'', year:'', teacher:'',
        times:'', loc:'', credit:'', type:''
      },
      courseArr: [],
      dialogVisible: false,
      formLabelWidth: '120px'
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    search(){
      this.$router.push('search?wd='+this.wd);
    },
    handleEdit(course) {
      this.$router.push('update?id='+course.id);
    },
    submitNewCourse(formName) {
      let url = 'http://localhost:9800/course/add-new';
      console.log('url = ' + url);
      let formData = this.qs.stringify(this.ruleForm);
      console.log('formData = ' + formData);
      this.axios.post(url, formData).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$message({
            message: '添加课程成功！',
            type: 'success'
          });
          this.dialogVisible = false;
          this.loadCourseList();
        } else if (responseBody.state == 40900) {
          this.$message.error(responseBody.message);
        } else {
          this.$message.error(responseBody.message);
          this.dialogVisible = false;
          this.loadCourseList();
        }
      })
    },
    handleDelete(course) {
      let url = 'http://localhost:9800/course/'+ course.id +'/delete'
      this.axios.post(url).then((response) => {
        let responseBody = response.data;
        if(responseBody.state != 20000) {
          this.$message.error(responseBody.message);
        }
        this.loadCourseList();
      })
    },
    openDeleteConfirm(course){
      let message = '此操作将永久删除【'+ course.name+'】课程，是否继续？';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete(course);
      }).catch(() => {

      });
    },
    loadCourseList() {
      console.log('loadCourseList')
      let url = 'http://localhost:9800/course';
      this.axios.get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.courseArr = responseBody.data;
        } else {
          this.$message.error(responseBody.message);
        }
      })
    },
  },
  mounted() {
    this.loadCourseList();
  }
}
</script>